<template>
  <!-- 药品出入库记录 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="药 品 出 入 库 记 录">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 主区域 -->
    <div class="main">
      <!-- 搜索 -->
      <van-search
        v-model="searchTxt"
        show-action
        placeholder="请输入药品名称(未出库药品)"
        @clear="onCancel"
        @search="onSearch"
        @cancel="onCancel"
      />
      <!-- 入库按钮 -->
      <van-button block type="primary" @click="ToWarehousing">入库</van-button>
      <!-- 数据列表区域 -->
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item
          v-for="(item, index) in drugList"
          :key="index"
          :title="item.name"
          :value="'数量' + item.number"
          :label="'入库执行人：' + item.createUser"
        >
          <p v-if="item.status == 0">状态：未出库</p>
          <p v-if="item.status == 1">状态：已出库</p>
          <p v-if="item.status == 2">状态：已过期</p>
          <p>入库时间：{{ item.createTime }}</p>
          <p>有效期时间：{{ item.validDate }}</p>
          <p>药品批次：{{ item.batchNumber }}</p>
          <p>药品编号：{{ item.id }}</p>
          <div class="opreateBtn">
            <van-button
              type="primary"
              size="small"
              round
              v-if="item.status == 0"
              @click="tackClick(item.id)"
              >出库</van-button
            >
            <van-button
              type="primary"
              size="small"
              round
              v-if="item.status == 1"
              disabled
              >出库</van-button
            >
            <van-button
              type="danger"
              size="small"
              round
              v-if="item.status == 2"
              @click="deleteClick(item.id)"
              >删除</van-button
            >
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "DrugRecord",

  data() {
    return {
      activeNames: "1",
      drugList: [], //列表数据
      searchTxt: "", //搜索字段
    };
  },

  mounted() {},

  created() {
    this.getList();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./DrugMain",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    getList() {
      this.$http
        .get("drug-warehousing-record", {})
        .then((res) => {
          console.log(res.data);
          this.drugList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //入库按钮
    ToWarehousing(){
        this.$router.push({
            path:'./Warehousing'
        })
    },
    //搜索
    onSearch() {
      this.$http
        .get("drug-warehousing-record/page", {
          params: {
            pageSize: 100,
            pageNum: 1,
            name: this.searchTxt,
          },
        })
        .then((res) => {
          //console.log(res.data.data);
          this.drugList = res.data.data.records;
        });
    },
    //搜索取消
    onCancel() {
      this.getList();
    },
    //取药按钮点击
    tackClick(id) {
      this.$http
        .get("drug-warehousing-record/outDrugHouse/" + id, {})
        .then(() => {
          //console.log(res.data);
          Toast("出库成功");
          setTimeout(() => {
            location.reload();
          }, 800);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除按钮
    deleteClick(id) {
      //   console.log(id);
      this.$http
        .delete("drug-warehousing-record", {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          console.log(res.data);
          Toast("删除成功");
          setTimeout(() => {
            location.reload();
          }, 800);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>